<style>
div.exampleSection {
	float: left;
	width: 215px;
	border: 1px solid #ccc;
	margin: 10px;
	padding: 10px;
	background-color: white;
	height: 160px;
}
div.exampleSection h3 {
	font-size: 90%;
	color: #aaa;
	margin: 5px;
}
</style>

<h2>Examples</h2>
<br />

<div class='exampleSection'>
<h3>Classic</h3>
<ul>
	<li><a href="../../examples/string_field.html">StringField</a></li>
	<li><a href="../../examples/checkbox.html">CheckBox</a></li>
	<li><a href="../../examples/textarea.html">Textarea</a></li>
	<li><a href="../../examples/password_field.html">Password</a></li>
	<li><a href="../../examples/hidden_field.html">HiddenField</a></li>
	<li><a href="../../examples/select_field.html">SelectField</a></li>
	<li><a href="../../examples/radio_field.html">RadioField</a></li>
</ul>
<br />
</div>

<div class='exampleSection'>
<h3>Extended</h3>
<ul>
	<li><a href="../../examples/email_field.html">EmailField</a></li>
	<li><a href="../../examples/url_field.html">UrlField</a></li>	
	<li><a href="../../examples/integer_field.html">IntegerField</a></li>
	<li><a href="../../examples/number_field.html">NumberField</a></li>
	<li><a href="../../examples/rte_field.html">RTEField</a></li>
	<li><a href="../../examples/color_field.html">ColorField</a></li><br />
<br />
</div>


<div class='exampleSection'>
<h3>Dates</h3>
<ul>
	<li><a href="../../examples/date_field.html">DateField</a></li>
	<li><a href="../../examples/datepicker_field.html">DatePickerField</a></li>
	<li><a href="../../examples/time_field.html">TimeField</a></li>
	<li><a href="../../examples/datetime_field.html">DateTimeField</a></li>
	<li><a href="../../examples/datesplit_field.html">DateSplitField</a></li>
<br />
</div>

<div class='exampleSection'>
<h3>Advanced</h3>
<ul>
	<li><a href="../../examples/slider_field.html">SliderField</a></li>
	<li><a href="../../examples/autocomplete.html">AutoComplete</a></li>
	<li><a href="../../examples/uneditable_field.html">Uneditable</a></li>
	<li><a href="../../examples/multiselect_field.html">MultiSelectField</a></li>
	<li><a href="../../examples/multiautocomplete.html">MultiAutoComplete</a></li>
	<li><a href="../../examples/dsselect_field.html">DSSelectField</a> (SelectField with YUI datasource)</li>
</ul>
</ul>
<br />
</div>

<div class='exampleSection'>
<h3>MetaFields</h3>
<ul>
	<li><a href="../../examples/group.html">Group</a></li>
	<li><a href="../../examples/form.html">Form</a></li>
	<li><a href="../../examples/list_field.html">ListField</a></li>
	<li><a href="../../examples/combine_field.html">CombineField</a></li>
	<li><a href="../../examples/inplaceedit.html">InPlaceEdit</a></li>
	<li><a href="../../examples/tree_field.html">TreeField</a> (beta)</li>
	<li><a href="../../examples/pair_field.html">PairField</a><i>(deprecated)</i></li>
</ul>
<br />
</div>

<div class='exampleSection'>
<h3>Various</h3>
<ul>
<li><a href="../../examples/ddlist_widget.html">Sortable List Widget</a></li>
	<li><a href="../../examples/using_xml.html">Example using XML</a></li>
	<li><a href="../../examples/yuiloader.html">Using the YUI loader</a><br /><br /></li>
	
	<li><a href="../../examples/datatable.html">DataTable for inputEx</a> (beta)</li>
	<li><a href="../../examples/dialog_widget.html">Dialog widget</a> (beta)</li>
	<li><a href="../../examples/interactions.html">Interactions</a> (beta)</li>
	<li><a href="../../examples/json-schema.html">JSON schema</a> (beta)</li>
</ul>
</div>

<div class='exampleSection'>
<h3>Styling</h3>
<ul>
	<li><a href="../../examples/styling_description.html">Show description when focused</a></li>
	<li><a href="../../examples/styling_label.html">Label positioning</a></li>
</ul>
</div>

<div class='exampleSection'>
<h3>External contributions:</h3>
<ul>
	<li><a href="../../js/ext/IPv4Field/ipv4_field.html">IPv4Field</a></li>
	<li><a href="../../js/ext/ColorField2/color_field2.html">ColorField2</a></li>
	<li><a href="../../js/ext/ImagemapField/imagemap_field.html">ImagemapField</a></li>
	<li><a href="../../js/ext/UpperCaseField/uppercase_field.html">UpperCaseField</a></li>
	<li><a href="../../js/ext/FrenchPhone/french_phone.html">FrenchPhone</a></li>
	<li><a href="../../js/ext/FrenchDate/french_date.html">FrenchDate</a></li>
	<li><a href="../../js/ext/BirthdateField/birthdate_field.html">BirthdateField</a></li>
</ul>
</div>

<div style='clear: both;'> </div>